home *** CD-ROM | disk | FTP | other *** search
/ Personal Computer World 2009 February / PCWFEB09.iso / Software / Resources / Chat & Communication / Gizmo Project 4.0.4 / WinGizmoInstall.exe / message_styles / Renkoo / main.css < prev    next >
Encoding:
Cascading Style Sheet File  |  2007-09-25  |  7.5 KB  |  386 lines
  1. *html .responseItem {height: 0;}
  2.  
  3. #contents {
  4.     overflow: hidden;
  5.     padding-top: 20px;
  6.     padding-bottom: 5px;
  7.     padding-left: 10px;
  8.     padding-right: 5px;
  9.     margin-top: 0px;
  10.     margin-bottom: 0px;
  11. }
  12.  
  13. #header1 { 
  14.     position: fixed; 
  15.     top: 0px; 
  16.     left: 0px; 
  17.     right: 0px; 
  18.     margin: 0; 
  19.     padding: 10px; 
  20.     overflow: auto; 
  21.     color: white; 
  22.     font-family: Lucida Grande; 
  23.     text-align: center; 
  24. /*    font-size: 10px; */
  25.     font-weight: regular; 
  26.     background: rgba(0,0,0,.65); 
  27.     z-index: 999; 
  28. }
  29.  
  30. #heading { 
  31.     position: fixed; 
  32.     top: 0px; 
  33.     left: 0px; 
  34.     margin: 0; 
  35.     padding: 5px;
  36.     font-weight: regular; 
  37.     background-color:#fbfbed;
  38.     z-index: 999;
  39.     width:100%;
  40.     height:45px;
  41.     border-bottom:2px solid #d5d5d5;
  42.     background:url("images/steelHeading.jpg") repeat-x top left;
  43.     
  44. }
  45.  
  46. #heading .conversationIncomingIcon {
  47.     position:absolute;
  48.     left:5px;
  49.     top:5px;
  50. }
  51.  
  52. #heading .conversationIncomingIcon img {
  53.     width:48px;
  54.     height:48px;
  55. }
  56.  
  57. #heading .conversationWith {
  58.     position:relative;
  59.     left:60px;
  60.     margin:5px 0 0 0;
  61.     font: bold 16px Myriad Pro, Myriad, Lucida Grande, Trebuchet MS, Arial;
  62. }
  63.  
  64. #heading .conversationTime {
  65.     position:relative;
  66.     left:60px;
  67.     color:#6d6d6d;
  68.     font: bold 10px Myriad Pro, Myriad, Lucida Grande, Trebuchet MS, Arial;
  69. }
  70.  
  71. body {
  72.     margin: 0;
  73.     background-color: white;
  74.     color: black;
  75. }
  76.  
  77. .status_container {
  78.     font: 10px Myriad, Lucida Grande, Arial;
  79. }
  80.  
  81. .chatItem {
  82.     clear:both;
  83. }
  84.  
  85. .chatItem .avatar {
  86.     float:left;
  87. }
  88.  
  89. .status {
  90.     margin:6px 0 6px 0;
  91. /*    font-size:10px; */
  92. }
  93.  
  94.  
  95. .incomingItem .timeStamp {
  96.         color:#b3cf77;
  97. }
  98.  
  99. .outgoingItem .timeStamp {
  100.     color:#dbd789;
  101. }
  102.  
  103.  
  104. #debugToggle {
  105.     position:absolute;
  106.     right:20px;
  107.     
  108. }
  109.  
  110. #debug {
  111.     border:1px solid red;
  112.     padding:0.25em;
  113.     
  114. }
  115.     
  116. /*#########Bubbles########## */
  117. .responseItem {
  118.     margin-left:42px;
  119.     margin-bottom:0.25em;
  120.     position:relative;
  121. }
  122.  
  123. .responseItem p {
  124.     margin:0;
  125.     padding:0;
  126. /*    font-size:0.85em; */
  127.     margin-top:-4px;
  128. }
  129.  
  130.  
  131. .bubbleHeading {
  132.     height:10px;
  133.     line-height:10px;
  134.     font-size:1px;
  135. }
  136.  
  137. .bubbleHeading div {
  138.     height:10px;
  139.     line-height:10px;
  140.     font-size:1px;
  141.     width:20px;
  142.     float:right;
  143. }
  144.  
  145. .bubbleIndicator {
  146.     height:11px;
  147.     width:12px;
  148.     float:left;
  149.     position:relative;
  150.     left:-9px;
  151. }
  152.  
  153. .response { 
  154.     margin-right:20px;
  155.     padding-left:15px;
  156.     padding-right:35px;
  157. /*    font-size:0.8em; */
  158.     word-wrap: break-word;
  159. }
  160.  
  161. .response img {
  162.     vertical-align:middle;
  163. }
  164.  
  165. .timeStamp {
  166.     position:absolute;
  167.     top:4px;
  168.     right:5px;
  169. /*    font-size:10px; */
  170. }
  171.  
  172. .bubbleFooting {
  173.     height:10px;
  174.     font-size:1px;
  175. }
  176.  
  177. .bubbleFooting div {
  178.     height:10px;
  179.     font-size:1px;
  180.     width:20px;
  181.     float:right;
  182.     margin:0;
  183.     padding:0;
  184. }
  185.  
  186. .avatar {
  187.     width:25px;
  188.     height:25px;
  189. }
  190.  
  191. .followUp {
  192.     border: 0;
  193.     height:2px;
  194. }
  195.  
  196.  
  197. /****** STatus  ******/
  198.  
  199. .statusMessage    {
  200.     background:url("images/steelBackground.gif") repeat-y top right;
  201.     opacity:0.5;
  202.     filter:alpha(opacity=50);
  203. }
  204.  
  205. .statusMessage .bubbleHeading {
  206.     background:url("images/steelCurves.gif") no-repeat top left;
  207. }
  208.  
  209. .statusMessage .bubbleHeading div {
  210.     background:url("images/steelCurves.gif") no-repeat top right;
  211. }
  212.  
  213. .statusMessage .bubbleIndicator {
  214.     background:url("images/steelIndicator.gif") no-repeat top left;
  215. }
  216.  
  217. .statusMessage .bubbleFooting {
  218.     background:url("images/steelCurves.gif") no-repeat bottom left;
  219. }
  220.  
  221. .statusMessage .bubbleFooting div {
  222.     background:url("images/steelCurves.gif") no-repeat bottom right;
  223. }
  224.  
  225. .statusMessage .response {
  226.     background:url("images/steelBackground.gif") repeat-y top left;
  227.     .color: gray;    /* IE will ignore the period an interpret this.  Take that IE7! */
  228. }
  229.  
  230.  
  231. /*############Incoming Bubble########## */
  232.  
  233. .incomingItem    {
  234.     background:url("images/greenBackground.gif") repeat-y top right;
  235. }
  236.  
  237. .incomingItem .bubbleHeading {
  238.     background:url("images/greenCurves.gif") no-repeat top left;
  239. }
  240.  
  241. .incomingItem .bubbleHeading div {
  242.     background:url("images/greenCurves.gif") no-repeat top right;
  243. }
  244.  
  245. .incomingItem .bubbleIndicator { 
  246.     background:url("images/greenIndicator.gif") no-repeat top left;
  247. }
  248.  
  249. .incomingItem .bubbleFooting {
  250.     background:url("images/greenCurves.gif") no-repeat bottom left;
  251. }
  252.  
  253. .incomingItem .bubbleFooting div {
  254.     background:url("images/greenCurves.gif") no-repeat bottom right;
  255. }
  256.  
  257. .incomingItem .response {
  258.     background:url("images/greenBackground.gif") repeat-y top left;
  259. }
  260.  
  261. .incomingItem .followUp {
  262.     color:#e2efc4;
  263.     background-color:#e2efc4;
  264.     border-bottom:1px solid #fff;
  265. }
  266.  
  267. /*############Incoming Bubble(Historical)########## */
  268.  
  269. .incomingItemHistorical    {
  270.     background:url("images/steelBackground.gif") repeat-y top right;
  271.     opacity:0.5;
  272.     filter:alpha(opacity=50);
  273. }
  274.  
  275. .incomingItemHistorical .bubbleHeading {
  276.     background:url("images/steelCurves.gif") no-repeat top left;
  277. }
  278.  
  279. .incomingItemHistorical .bubbleHeading div {
  280.     background:url("images/steelCurves.gif") no-repeat top right;
  281. }
  282.  
  283. .incomingItemHistorical .bubbleIndicator { 
  284.     background:url("images/steelIndicator.gif") no-repeat top left;
  285. }
  286.  
  287. .incomingItemHistorical .bubbleFooting {
  288.     background:url("images/steelCurves.gif") no-repeat bottom left;
  289. }
  290.  
  291. .incomingItemHistorical .bubbleFooting div {
  292.     background:url("images/steelCurves.gif") no-repeat bottom right;
  293. }
  294.  
  295. .incomingItemHistorical .response {
  296.     background:url("images/steelBackground.gif") repeat-y top left;
  297.     .color: gray;    /* IE will ignore the period and interpret this.  Take that IE7! */
  298. }
  299.  
  300. .incomingItemHistorical .followUp {
  301.     color:#ececec;
  302.     background-color:#ececec;
  303.     border-bottom:1px solid #fff;
  304. }
  305.  
  306. /*############Outgoing Bubble########## */
  307.  
  308. .outgoingItem    {
  309.     background:url("images/yellowBackground.gif") repeat-y top right;
  310. }
  311.  
  312. .outgoingItem .bubbleHeading {
  313.     background:url("images/yellowCurves.gif") no-repeat top left;
  314. }
  315.  
  316. .outgoingItem .bubbleHeading div {
  317.     background:url("images/yellowCurves.gif") no-repeat top right;
  318. }
  319.  
  320. .outgoingItem .bubbleIndicator { 
  321.     background:url("images/yellowIndicator.gif") no-repeat top left;
  322. }
  323.  
  324. .outgoingItem .bubbleFooting {
  325.     background:url("images/yellowCurves.gif") no-repeat bottom left;
  326. }
  327.  
  328. .outgoingItem .bubbleFooting div {
  329.     background:url("images/yellowCurves.gif") no-repeat bottom right;
  330. }
  331.  
  332. .outgoingItem .response {
  333.     background:url("images/yellowBackground.gif") repeat-y top left;
  334. }
  335.  
  336. .outgoingItem .followUp {
  337.     color:#f4f2cb;
  338.     background-color:#f4f2cb;
  339.     border-bottom:1px solid #fff;
  340. }
  341.  
  342. /*############Outgoing Bubble (Historical)########## */
  343.  
  344. .outgoingItemHistorical    {
  345.     background:url("images/steelBackground.gif") repeat-y top right;
  346.     opacity:0.5;
  347.     filter:alpha(opacity=50);
  348. }
  349.  
  350. .outgoingItemHistorical .bubbleHeading {
  351.     background:url("images/steelCurves.gif") no-repeat top left;
  352. }
  353.  
  354. .outgoingItemHistorical .bubbleHeading div {
  355.     background:url("images/steelCurves.gif") no-repeat top right;
  356. }
  357.  
  358. .outgoingItemHistorical .bubbleIndicator { 
  359.     background:url("images/steelIndicator.gif") no-repeat top left;
  360. }
  361.  
  362. .outgoingItemHistorical .bubbleFooting {
  363.     background:url("images/steelCurves.gif") no-repeat bottom left;
  364. }
  365.  
  366. .outgoingItemHistorical .bubbleFooting div {
  367.     background:url("images/steelCurves.gif") no-repeat bottom right;
  368. }
  369.  
  370. .outgoingItemHistorical .response {
  371.     background:url("images/steelBackground.gif") repeat-y top left;
  372.     .color: gray;    /* IE will ignore the period and interpret this.  Take that IE7! */
  373. }
  374.  
  375. .outgoingItemHistorical .followUp {
  376.     color:#ececec;
  377.     background-color:#ececec;
  378.     border-bottom:1px solid #fff;
  379. }
  380.  
  381. .fadedimage {
  382.     opacity:0.5;
  383.     filter:alpha(opacity=50);
  384. }
  385.  
  386.